import { createSignal } from "solid-js";
import banner from "./assets/banner.jpg"
import { A } from "@solidjs/router";
import { useCartContext } from "./context/CartContext";

function App(props) {

  const [name, setName] = createSignal('luigi');
  const [darkTheme, setDarkTheme] = createSignal(false)

    function toggleTheme(){
        setDarkTheme(!darkTheme())
    }

  const { items } = useCartContext();

  const quantityItemsInCart = () => {
    
    return items.reduce((acc, current) => {
      return acc + current.quantity
    }, 0)
  }

  return (
    <div class="container m-auto">
      <header
        class="my-4 p-2 text-xl flex items-center gap-4"  
        classList={{
          "bg-neutral-900 text-white": darkTheme()
        }}
      >
      <span class="material-symbols-outlined cursor-pointer"
            onClick={toggleTheme}
        >
        brightness_5
      </span>

        <h1>Ninja Merch</h1>

        <A href="/">Home</A> 
        <A href="/cart">Cart ({quantityItemsInCart()})</A> 
      </header>

      <img class="rounded-md" src={banner} alt="site banner"/>

      {props.children}
      
    </div>
  );
}

export default App;
